<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <!-- <ul>
        <li>
            <h3>id: 1</h3>
            <p>姓名: atguigu</p>
            <p>年龄: 18</p>
        </li>
    </ul> -->
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    let arr = [1, 2, 3, 4];
    let users = [
        {
            id: 1,
            username: 'atguigu',
            age: 19
        },
        {
            id: 2,
            username: '尚硅谷',
            age: 10
        }
    ]

    let reactUser = [
        <li key='1'>
            <h3>id: 1</h3>
            <p>姓名: atguigu</p>
            <p>年龄: 19</p>
        </li>,
        <li key='2'>
            <h3>id: 2</h3>
            <p>姓名: 尚硅谷</p>
            <p>年龄: 10</p>
        </li>
    ]
    root.render((
        <div>
            <div>
                {arr}
            </div>
            {/*<div>{users}</div>*/}
            <ul>{reactUser}</ul>
            <hr/>
            <ul>{users.map(item => {
                return (
                    <li key={item.id}>
                        <h3>id:{item.id}</h3>
                        <p>姓名：{item.username}</p>
                        <p>年龄：{item.age}</p>
                    </li>
                )
            })}</ul>
            <hr />
            <ul>
                {users.map(item =>(
                        <li key={item.id}>
                            <h3>id:{item.id}</h3>
                            <p>姓名：{item.username}</p>
                            <p>年龄：{item.age}</p>
                        </li>
                    )
                )}
            </ul>
        </div>
    ))
</script>

</html>